<!DOCTYPE html>
<html>
<head>
    <title>Linked Lists</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    
        <div id="example">
            <div class="demo-section one-way">
                <div class="list-wrapper">
                    <ul id="sortable-listA">
                        <li class="list-item">Apples</li>
                        <li class="list-item">Grapefruits</li>
                        <li class="list-item">Bananas</li>
                    </ul>

                    <ul id="sortable-listB">
                        <li class="list-item">Cranberries</li>
                        <li class="list-item">Pineapples</li>
                        <li class="list-item">Strawberries</li>
                    </ul>
                </div>
            </div>

            <div class="demo-section two-way">
                <div class="list-wrapper">
                    <ul id="sortable-listC" style="min-height: 110px;">
                        <li class="list-item">Cherries</li>
                        <li class="list-item">Pears</li>
                        <li class="list-item">Plums</li>
                    </ul>

                    <ul id="sortable-listD" style="min-height: 110px;">
                        <li class="list-item">Apricots</li>
                        <li class="list-item">Grapes</li>
                        <li class="list-item">Lemons</li>
                    </ul>
                </div>
            </div>

            <script>
                function placeholder(element) {
                    return $("<li class='list-item' id='placeholder'>Drop Here!</li>");
                }

                $(document).ready(function() {
                    $("#sortable-listA").kendoSortable({
                        connectWith: "#sortable-listB",
                        placeholder: placeholder,
                        cursor: "url('../content/web/sortable/grabbing.cur'), default"
                    });

                    $("#sortable-listB").kendoSortable({
                        placeholder: placeholder,
                        cursor: "url('../content/web/sortable/grabbing.cur'), default"
                    });

                    $("#sortable-listC").kendoSortable({
                        connectWith: "#sortable-listD",
                        placeholder: placeholder,
                        cursor: "url('../content/web/sortable/grabbing.cur'), default"
                    });

                    $("#sortable-listD").kendoSortable({
                        connectWith: "#sortable-listC",
                        placeholder: placeholder,
                        cursor: "url('../content/web/sortable/grabbing.cur'), default"
                    });
                });
            </script>

            <style>
                #example {
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                }

                .demo-section {
                    padding: 50px 70px;
                }

                .one-way {
                    background: url('../content/web/sortable/one-way.png') no-repeat 50% 50%;
                }

                .two-way {
                    background: url('../content/web/sortable/two-way.png') no-repeat 50% 50%;
                }

                .list-wrapper {
                    overflow: hidden;
                }

                #sortable-listA, #sortable-listB, #sortable-listC, #sortable-listD {
                    width: 210px;
                    min-height: 40px;
                    margin: 0;
                    padding: 0;
                    border: 1px solid #dddddd;
                    border-radius: 4px;
                }

                #sortable-listA, #sortable-listC {
                    float: left;
                }

                #sortable-listB, #sortable-listD {
                    float: right;
                }

                .list-item {
                    list-style-type: none;
                    width: 200px;
                    margin: 5px;
                    line-height: 30px;
                    text-align: center;
                    background-color: #222222;
                    color: #ffffff;
                    border-radius: 3px;
                    cursor: url('../content/web/sortable/grab.cur'), default;
                }

                #sortable-listA .list-item {
                    background-color: #54b8fa;
                    color: #000000;
                }

                #sortable-listB .list-item {
                    background-color: #ff879e;
                    color: #000000;
                }

                #sortable-listC .list-item {
                    background-color: #66cc66;
                    color: #000000;
                }

                #sortable-listD .list-item {
                    background-color: #ffcc33;
                    color: #000000;
                }

                #placeholder.list-item {
                    background-color: #ffffff;
                    color: #777;
                }
            </style>
        </div>


    
    
</body>
</html>
